<template>
  <div class="rank"
       ref="rank">
    <scroll :data="rankList"
            class="toplist"
            ref="toplist">
      <div class="toplist"
           ref="toplist">
        <ul>
          <li @click='selecItem(rank)'
              v-show="rank.tracks.length"
              v-for="(rank, index) in rankList"
              :key="rank.id"
              class="item">
            <div class="icon">
              <img width="100"
                   :src='rank.imgUrl'
                   height="100" />
            </div>
            <ul class="songlist">
              <li v-for="(song, index) in rank.tracks"
                  :key="index"
                  class="song">
                <span>{{index+1+'.'}}</span>
                <span>{{song.first}} - {{song.second}}</span>
              </li>
            </ul>
          </li>
        </ul>
        <div class="loading-container"
             v-show="!rankList.length">
          <loading></loading>
        </div>
      </div>
    </scroll>
    <router-view></router-view>
  </div>
</template>

<script type="text/ecmascript-6">

import Loading from 'base/loading/loading'
import Scroll from 'base/scroll/scroll'
import { mapMutations } from 'vuex'

export default {
  data () {
    return {
      rankList: []
    }
  },
  created () {
    this._getRankList()
  },
  components: {
    Loading,
    Scroll
  },
  methods: {
    _getRankList () {
      this.$api.music._getRankList()
        .then(res => {
          let ret = []
          let temp = []
          temp = res.list.slice(0, 7)
          temp.forEach(element => {
            ret.push({
              tracks: element.tracks,
              des: element.description,
              imgUrl: element.coverImgUrl,
              name: element.name,
              id: element.id
            })
          });
          this.rankList = ret
          // console.log(this.rankList);
        })
    },
    selecItem (item) {
      this.$router.push({
        path: `/rank/${item.id}`,
      })
      this.setRankList(item)
    },
    ...mapMutations({
      setRankList: 'SET_RANK_LIST'
    })
  },
}
</script>


<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable'
@import '~common/stylus/mixin'
.rank
  position fixed
  width 100%
  top 88px
  bottom 0
  .toplist
    height 100%
    overflow hidden
    .item
      display flex
      margin 0 20px
      padding-top 20px
      height 100px
      &:last-child
        padding-bottom 20px
      .icon
        flex 0 0 100px
        width 100px
        height 100px
      .songlist
        flex 1
        display flex
        flex-direction column
        justify-content center
        padding 0 20px
        height 100px
        overflow hidden
        background $color-highlight-background
        color $color-text-d
        font-size $font-size-small
        .song
          no-wrap()
          line-height 26px
    .loading-container
      position absolute
      width 100%
      top 50%
      transform translateY(-50%)
</style>